<template>
  <view class="accessibility-settings-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left">
        <button class="back-button" @click="navigateBack" aria-label="返回">
          <text class="icon">←</text>
        </button>
      </view>
      <view class="navbar-title" role="heading" aria-level="1">无障碍设置</view>
      <view class="navbar-right"></view>
    </view>
    
    <!-- 主内容区域 -->
    <scroll-view class="content" show-scrollbar="false" aria-label="无障碍设置内容">
      <!-- 无障碍概览卡片 -->
      <view class="overview-card">
        <view class="overview-title">无障碍支持</view>
        <view class="accessibility-score">
          <text class="score-label">当前无障碍评分：</text>
          <text class="score-value" :style="{ color: scoreColor }" role="status">{{ accessibilityScore }}</text>
          <text class="score-label">/ 100</text>
        </view>
        <text class="overview-description">
          通过调整以下设置，可以改善应用的可访问性，让所有用户都能轻松使用。
        </text>
      </view>
      
      <!-- 屏幕阅读器设置 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title" role="heading" aria-level="2">屏幕阅读器</text>
        </view>
        <view class="section-content">
          <!-- 屏幕阅读器开关 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">启用屏幕阅读器支持</text>
              <text class="setting-description">允许应用内容被屏幕阅读器朗读</text>
            </view>
            <switch 
              v-model="accessibilityState.screenReader.enabled"
              @change="handleScreenReaderToggle"
              aria-label="启用屏幕阅读器支持"
              class="setting-switch"
            />
          </view>
          
          <!-- 朗读速度 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">朗读速度</text>
              <text class="setting-description">{{ accessibilityState.screenReader.speed.toFixed(1) }}x</text>
            </view>
            <slider 
              v-model="accessibilityState.screenReader.speed"
              @change="handleSpeechSpeedChange"
              min="0.5"
              max="2.0"
              step="0.1"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="朗读速度滑块"
              class="setting-slider"
            />
          </view>
          
          <!-- 自动朗读 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">页面自动朗读</text>
              <text class="setting-description">页面加载后自动朗读主要内容</text>
            </view>
            <switch 
              v-model="accessibilityState.screenReader.autoRead"
              @change="handleSettingChange"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="页面自动朗读"
              class="setting-switch"
            />
          </view>
          
          <!-- 朗读元素描述 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">朗读元素描述</text>
              <text class="setting-description">朗读元素的 aria-label 和描述信息</text>
            </view>
            <switch 
              v-model="accessibilityState.screenReader.readDescriptions"
              @change="handleSettingChange"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="朗读元素描述"
              class="setting-switch"
            />
          </view>
        </view>
      </view>
      
      <!-- 视觉辅助设置 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title" role="heading" aria-level="2">视觉辅助</text>
        </view>
        <view class="section-content">
          <!-- 高对比度模式 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">高对比度模式</text>
              <text class="setting-description">增强文字和背景对比度，提高可读性</text>
            </view>
            <switch 
              v-model="accessibilityState.visualAids.highContrast"
              @change="handleHighContrastToggle"
              aria-label="高对比度模式"
              class="setting-switch"
            />
          </view>
          
          <!-- 字体大小缩放 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">字体大小</text>
              <text class="setting-description">{{ accessibilityState.visualAids.fontSizeScale.toFixed(1) }}x</text>
            </view>
            <slider 
              v-model="accessibilityState.visualAids.fontSizeScale"
              @change="handleFontSizeChange"
              min="0.8"
              max="2.0"
              step="0.1"
              aria-label="字体大小滑块"
              class="setting-slider"
            />
          </view>
          
          <!-- 行高调整 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">行高</text>
              <text class="setting-description">{{ accessibilityState.visualAids.lineHeight.toFixed(1) }}x</text>
            </view>
            <slider 
              v-model="accessibilityState.visualAids.lineHeight"
              @change="handleLineHeightChange"
              min="1.0"
              max="2.0"
              step="0.1"
              aria-label="行高滑块"
              class="setting-slider"
            />
          </view>
          
          <!-- 颜色反转 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">颜色反转</text>
              <text class="setting-description">反转屏幕颜色，减少屏幕亮度</text>
            </view>
            <switch 
              v-model="accessibilityState.visualAids.invertColors"
              @change="handleSettingChange"
              aria-label="颜色反转"
              class="setting-switch"
            />
          </view>
          
          <!-- 减少动画 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">减少动画</text>
              <text class="setting-description">禁用或简化页面过渡和动画效果</text>
            </view>
            <switch 
              v-model="accessibilityState.visualAids.reducedMotion"
              @change="handleReducedMotionToggle"
              aria-label="减少动画"
              class="setting-switch"
            />
          </view>
        </view>
      </view>
      
      <!-- 键盘导航设置 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title" role="heading" aria-level="2">键盘导航</text>
        </view>
        <view class="section-content">
          <!-- 键盘导航开关 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">启用键盘导航</text>
              <text class="setting-description">使用键盘快捷键导航和操作</text>
            </view>
            <switch 
              v-model="accessibilityState.keyboardNavigation.enabled"
              @change="handleSettingChange"
              aria-label="启用键盘导航"
              class="setting-switch"
            />
          </view>
          
          <!-- 显示焦点指示器 -->
          <view class="setting-item" :disabled="!accessibilityState.keyboardNavigation.enabled">
            <view class="setting-info">
              <text class="setting-label">显示焦点指示器</text>
              <text class="setting-description">高亮显示当前键盘焦点位置</text>
            </view>
            <switch 
              v-model="accessibilityState.keyboardNavigation.showFocus"
              @change="handleSettingChange"
              :disabled="!accessibilityState.keyboardNavigation.enabled"
              aria-label="显示焦点指示器"
              class="setting-switch"
            />
          </view>
          
          <!-- 焦点指示器样式 -->
          <view class="setting-item" :disabled="!accessibilityState.keyboardNavigation.enabled || !accessibilityState.keyboardNavigation.showFocus">
            <view class="setting-info">
              <text class="setting-label">焦点指示器样式</text>
              <text class="setting-description">{{ focusStyleText }}</text>
            </view>
            <picker 
              v-model="accessibilityState.keyboardNavigation.focusStyle"
              @change="handleSettingChange"
              :range="['default', 'high-visibility']"
              :disabled="!accessibilityState.keyboardNavigation.enabled || !accessibilityState.keyboardNavigation.showFocus"
              aria-label="焦点指示器样式选择器"
              class="setting-picker"
            >
              <view class="picker-trigger">
                <text class="picker-text">{{ focusStyleText }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <!-- 交互辅助设置 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title" role="heading" aria-level="2">交互辅助</text>
        </view>
        <view class="section-content">
          <!-- 触摸目标放大 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">触摸目标放大</text>
              <text class="setting-description">增大按钮和交互元素的点击区域</text>
            </view>
            <switch 
              v-model="accessibilityState.interactionAids.largeTargets"
              @change="handleSettingChange"
              aria-label="触摸目标放大"
              class="setting-switch"
            />
          </view>
          
          <!-- 声音反馈 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">声音反馈</text>
              <text class="setting-description">操作时提供声音提示</text>
            </view>
            <switch 
              v-model="accessibilityState.interactionAids.soundFeedback.enabled"
              @change="handleSettingChange"
              aria-label="声音反馈"
              class="setting-switch"
            />
          </view>
          
          <!-- 震动反馈 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">震动反馈</text>
              <text class="setting-description">操作时提供震动提示</text>
            </view>
            <switch 
              v-model="accessibilityState.interactionAids.vibrationFeedback.enabled"
              @change="handleSettingChange"
              aria-label="震动反馈"
              class="setting-switch"
            />
          </view>
          
          <!-- 长按激活 -->
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-label">长按激活</text>
              <text class="setting-description">长按元素以激活交互</text>
            </view>
            <switch 
              v-model="accessibilityState.interactionAids.longPress.enabled"
              @change="handleSettingChange"
              aria-label="长按激活"
              class="setting-switch"
            />
          </view>
        </view>
      </view>
      
      <!-- 内容辅助设置 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title" role="heading" aria-level="2">内容辅助</text>
        </view>
        <view class="section-content">
          <!-- 朗读时高亮 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">朗读时高亮</text>
              <text class="setting-description">朗读时高亮显示当前内容</text>
            </view>
            <switch 
              v-model="accessibilityState.contentAids.highlightAsRead"
              @change="handleSettingChange"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="朗读时高亮"
              class="setting-switch"
            />
          </view>
          
          <!-- 图片描述优先 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">图片描述优先</text>
              <text class="setting-description">优先朗读图片的描述信息</text>
            </view>
            <switch 
              v-model="accessibilityState.contentAids.imageDescriptions"
              @change="handleSettingChange"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="图片描述优先"
              class="setting-switch"
            />
          </view>
          
          <!-- 标点符号朗读 -->
          <view class="setting-item" :disabled="!accessibilityState.screenReader.enabled">
            <view class="setting-info">
              <text class="setting-label">标点符号朗读</text>
              <text class="setting-description">朗读时包含标点符号</text>
            </view>
            <switch 
              v-model="accessibilityState.contentAids.readPunctuation"
              @change="handleSettingChange"
              :disabled="!accessibilityState.screenReader.enabled"
              aria-label="标点符号朗读"
              class="setting-switch"
            />
          </view>
        </view>
      </view>
      
      <!-- 重置按钮 -->
      <view class="reset-section">
        <button class="reset-button" @click="handleResetConfig" aria-label="重置无障碍设置">
          重置所有设置
        </button>
        <text class="reset-note">重置后将恢复所有无障碍设置的默认值</text>
      </view>
      
      <!-- 无障碍提示 -->
      <view class="help-section">
        <text class="help-title" role="heading" aria-level="2">无障碍帮助</text>
        <text class="help-text">
          如有任何关于无障碍功能的问题，请联系我们的客服团队获取帮助。
        </text>
        <button class="help-button" @click="contactSupport" aria-label="联系客服">
          联系客服
        </button>
      </view>
      
      <view class="spacer"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
import { useAccessibility } from '../../plugins/accessibility/AccessibilityService';
import { useRouter } from 'vue-router';

// 初始化
const accessibility = useAccessibility();
const router = useRouter();

// 响应式状态
const accessibilityState = reactive({ ...accessibility.getConfig() });
const accessibilityScore = ref(75); // 模拟评分，实际应用中可通过计算获取

// 计算属性
const scoreColor = computed(() => {
  if (accessibilityScore.value >= 80) return '#4CAF50';
  if (accessibilityScore.value >= 60) return '#FFC107';
  return '#F44336';
});

const focusStyleText = computed(() => {
  return accessibilityState.keyboardNavigation.focusStyle === 'default' 
    ? '默认' 
    : '高可见性';
});

// 方法
const navigateBack = () => {
  router.back();
};

// 处理设置变更
const handleSettingChange = () => {
  // 应用设置变更
  accessibility.applySettings();
  // 通知用户设置已保存
  accessibility.announce('设置已保存');
  // 更新无障碍评分
  updateAccessibilityScore();
};

// 处理屏幕阅读器切换
const handleScreenReaderToggle = () => {
  accessibility.toggleScreenReader();
  // 如果启用了屏幕阅读器，给出提示
  if (accessibilityState.screenReader.enabled) {
    accessibility.announce('屏幕阅读器已启用，请使用朗读速度滑块调整语速');
  }
  updateAccessibilityScore();
};

// 处理高对比度切换
const handleHighContrastToggle = () => {
  accessibility.toggleHighContrast();
  updateAccessibilityScore();
};

// 处理减少动画切换
const handleReducedMotionToggle = () => {
  accessibility.toggleReducedMotion();
  updateAccessibilityScore();
};

// 处理朗读速度变更
const handleSpeechSpeedChange = () => {
  accessibility.adjustSpeechSpeed(accessibilityState.screenReader.speed);
  // 演示当前语速
  accessibility.speak('当前朗读速度已调整', { speed: accessibilityState.screenReader.speed });
};

// 处理字体大小变更
const handleFontSizeChange = () => {
  accessibility.adjustFontSize(accessibilityState.visualAids.fontSizeScale);
  updateAccessibilityScore();
};

// 处理行高变更
const handleLineHeightChange = () => {
  accessibility.applySettings();
  updateAccessibilityScore();
};

// 重置配置
const handleResetConfig = () => {
  // 显示确认对话框
  uni.showModal({
    title: '确认重置',
    content: '确定要将所有无障碍设置恢复为默认值吗？',
    success: (res) => {
      if (res.confirm) {
        // 重置配置
        accessibility.resetConfig();
        // 重新加载状态
        Object.assign(accessibilityState, accessibility.getConfig());
        // 通知用户
        accessibility.announce('所有无障碍设置已重置为默认值');
        updateAccessibilityScore();
      }
    }
  });
};

// 联系客服
const contactSupport = () => {
  uni.showModal({
    title: '联系客服',
    content: '请通过以下方式联系我们：\n邮箱：support@starmate.com\n电话：400-123-4567',
    showCancel: false
  });
};

// 更新无障碍评分（模拟计算）
const updateAccessibilityScore = () => {
  let score = 0;
  
  // 屏幕阅读器设置评分
  if (accessibilityState.screenReader.enabled) score += 20;
  if (accessibilityState.screenReader.speed >= 0.8 && accessibilityState.screenReader.speed <= 1.5) score += 5;
  
  // 视觉辅助设置评分
  if (accessibilityState.visualAids.highContrast) score += 15;
  if (accessibilityState.visualAids.fontSizeScale >= 1.0) score += 10;
  if (accessibilityState.visualAids.lineHeight >= 1.5) score += 10;
  if (accessibilityState.visualAids.reducedMotion) score += 10;
  
  // 键盘导航设置评分
  if (accessibilityState.keyboardNavigation.enabled) score += 15;
  if (accessibilityState.keyboardNavigation.showFocus) score += 5;
  
  // 确保分数在有效范围内
  accessibilityScore.value = Math.max(0, Math.min(100, score));
};

// 监听无障碍服务变化
const unsubscribe = accessibility.on('settingsChange', (newSettings) => {
  Object.assign(accessibilityState, newSettings);
});

// 生命周期
onMounted(() => {
  // 初始化无障碍评分
  updateAccessibilityScore();
  
  // 朗读页面标题
  accessibility.announce('无障碍设置页面');
});

onBeforeUnmount(() => {
  // 取消监听
  unsubscribe();
});
</script>

<style scoped>
.accessibility-settings-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-background);
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.navbar-left,
.navbar-right {
  width: 40px;
}

.back-button {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.icon {
  font-size: 24px;
  color: var(--color-primary-base);
}

.navbar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
}

/* 主内容区域 */
.content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* 无障碍概览卡片 */
.overview-card {
  background-color: var(--color-card);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.overview-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.accessibility-score {
  display: flex;
  align-items: baseline;
  margin-bottom: 12px;
}

.score-label {
  font-size: 16px;
  color: var(--color-text-secondary);
}

.score-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0 4px;
}

.overview-description {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* 分组 */
.section {
  margin-bottom: 24px;
}

.section-header {
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-left: 4px;
}

.section-content {
  background-color: var(--color-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:active {
  background-color: var(--color-card-active);
}

.setting-item[disabled] {
  opacity: 0.6;
}

.setting-info {
  flex: 1;
  margin-right: 12px;
}

.setting-label {
  display: block;
  font-size: 16px;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.setting-description {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* 开关 */
.setting-switch {
  width: 52px;
  height: 32px;
}

/* 滑块 */
.setting-slider {
  width: 120px;
  height: 40px;
}

/* 选择器 */
.setting-picker {
  width: 120px;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.picker-arrow {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

/* 重置按钮 */
.reset-section {
  text-align: center;
  margin: 32px 0;
}

.reset-button {
  background-color: transparent;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 8px;
}

.reset-button:active {
  background-color: rgba(244, 67, 54, 0.1);
}

.reset-note {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* 帮助部分 */
.help-section {
  background-color: var(--color-card);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--color-border);
}

.help-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.help-text {
  display: block;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.help-button {
  background-color: var(--color-primary-base);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
}

.help-button:active {
  background-color: var(--color-primary-dark);
}

/* 间距 */
.spacer {
  height: 40px;
}

/* 高对比度模式样式覆盖 */
:global(.high-contrast) .overview-card,
:global(.high-contrast) .section-content,
:global(.high-contrast) .help-section {
  border-color: #000;
  background-color: #fff;
}

:global(.high-contrast) .setting-label,
:global(.high-contrast) .section-title,
:global(.high-contrast) .navbar-title,
:global(.high-contrast) .overview-title,
:global(.high-contrast) .help-title {
  color: #000;
  font-weight: bold;
}

:global(.high-contrast) .setting-description,
:global(.high-contrast) .overview-description,
:global(.high-contrast) .help-text {
  color: #000;
}

/* 减少动画模式 */
:global(.reduce-motion) * {
  transition: none !important;
  animation: none !important;
}

/* 适配不同屏幕尺寸 */
@media screen and (min-width: 768px) {
  .content {
    max-width: 600px;
    margin: 0 auto;
  }
}
</style>